<!--
 * @description  : 市管检查-嫌疑人登记组件
 * @descriptionDetail: 市管检查-嫌疑人登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-09 18:43:02
-->
<template>
	<view class="page">
		<theme-navbar :isWhite="false" title="嫌疑人登记" :customBack="handlerBack">
			<view class="nav-right-icon" v-if="!isDisabled" @click="confirmBtn">确定</view>
		</theme-navbar>
		<u-form :model="personForm" label-position="top" style="padding: 0px 10px" ref="uForm" :error-type="errorType">
			<u-form-item label="姓名" required prop="personName" :label-width="180">
				<u-input :custom-style="valueStyle" placeholder="请输入姓名" :disabled="isDisabled" v-model="personForm.personName" />
			</u-form-item>
			<u-form-item label="手机号码" prop="tel" :label-width="180">
				<u-input :custom-style="valueStyle" placeholder="请输入手机号码" :disabled="isDisabled" v-model="personForm.tel" />
			</u-form-item>
			<u-form-item label="住址" prop="address" :label-width="180">
				<u-input :custom-style="valueStyle" :disabled="isDisabled" placeholder="请输入住址" v-model="personForm.address" />
			</u-form-item>
			<u-form-item label="身份证号" prop="idCard" :label-width="180">
				<u-input :custom-style="valueStyle" placeholder="请输入身份证号" :disabled="isDisabled" v-model="personForm.idCard" />
			</u-form-item>
			<u-form-item label="籍贯" prop="nativePlaceName" :label-width="180" right-icon="arrow-right">
				<u-input
					:custom-style="pointerStyle"
					placeholder="请选择籍贯"
					:disabled="true"
					v-model="personForm.nativePlaceName"
					@tap="!isDisabled&&(areaOpen=true)"
				/>
			</u-form-item>
			<u-form-item label="车辆类型" prop="carTypeName" :label-width="180" right-icon="arrow-right">
				<u-input
					:custom-style="pointerStyle"
					placeholder="请选择车辆类型"
					:disabled="true"
					v-model="personForm.carTypeName"
					@tap="!isDisabled&&(carTypeShow=true)"
				/>
			</u-form-item>
			<u-form-item label="车辆颜色" prop="carColorName" :label-width="180" right-icon="arrow-right">
				<u-input
					:custom-style="pointerStyle"
					placeholder="请选择车辆颜色"
					:disabled="true"
					v-model="personForm.carColorName"
					@tap="!isDisabled&&(carColorShow=true)"
				/>
			</u-form-item>
			<u-form-item label="品牌型号" prop="carStyle" :label-width="180">
				<u-input :custom-style="valueStyle" placeholder="请输入品牌型号" :disabled="isDisabled" v-model="personForm.carStyle" />
			</u-form-item>
			<u-form-item label="车牌号码" prop="carNum" :label-width="180">
				<u-input :custom-style="valueStyle" placeholder="请输入车牌号码" :disabled="isDisabled" v-model="personForm.carNum" />
			</u-form-item>
		</u-form>
		<u-select :list="carTypeDict" v-model="carTypeShow" @confirm="hanlderChangeCarType"></u-select>
		<u-select :list="carColorDict" v-model="carColorShow" @confirm="hanlderChangeCarColor"></u-select>
		<u-popup mode="bottom" height="80%" border-radius="16" v-model="areaOpen">
			<area-select @choose="handlerChooseArea"></area-select>
		</u-popup>
	</view>
</template>

<script>
	import AreaSelect from '@/components/area-select.vue';
	export default {
		components: {
			AreaSelect,
		},
		props: {
			personData: {
				type: Object,
				default: () => {},
			},
			isDisabled: {
				// 是否可编辑
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				errorType: ['border-bottom', 'message'],
				valueStyle: {
					marginRight: '5px',
				},
				personForm: {
					uuid: '',
					personName: '',
					tel: '',
					address: '',
					idCard: '',
					nativePlace: '',
					nativePlaceName: '',
					carType: '',
					carTypeName: '',
					carColor: '',
					carColorName: '',
					carStyle: '',
					carNum: '',
				},
				rules: {
					// 数量
					personName: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur'],
						},
					],
					tel: [
						{
							validator: (rule, value) => {
								return !value || this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						},
					],
					idCard: [
						{
							validator: (rule, value) => {
								return !value || this.$u.test.idCard(value);
							},
							message: '身份证号码不正确',
							trigger: ['change', 'blur'],
						},
					],
					carNum: [
						{
							validator: (rule, value) => {
								return !value || this.$u.test.carNo(value);
							},
							message: '车辆号码不正确',
							trigger: ['change', 'blur'],
						},
					],
				},
				carTypeShow: false,
				carTypeDict: [], // 车辆类型字典数据
				carColorShow: false,
				carColorDict: [], // 车辆颜色字典数据
				areaOpen: false, // 区划选择
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
				pointerStyle: {
				  marginRight: "5px",
					pointerEvents: "none !important"
				},
				// h5端部分浏览器input设置disabled后点击事件失效 2023-10-25 fsx start
			};
		},
		onReady() {
			this.$refs.uForm && this.$refs.uForm.setRules(this.rules);
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
		},
		created() {
			Object.assign(this.personForm, this.personData);
			//处理行政区划显问题 2023-6-6 10:50:03 fsx start
			if (!!this.personForm.nativePlace) {
				let codes = this.personForm.nativePlace.split(',');
				this.personForm.nativePlaceName = this.$store.state.areaObj[codes[codes.length - 1]];
			}
			//处理行政区划显问题 2023-6-6 10:50:03 fsx end
			this.carTypeDict = this.$store.state.dicts['C_CAR_STYLE'];
			this.carColorDict = this.$store.state.dicts['C_CAR_COLOR'];
		},
		methods: {
			// 选择车辆类型
			hanlderChangeCarType(p) {
				this.personForm.carType = p[0].value;
				this.personForm.carTypeName = p[0].label;
			},
			// 选择车辆颜色
			hanlderChangeCarColor(p) {
				this.personForm.carColor = p[0].value;
				this.personForm.carColorName = p[0].label;
			},
			// 选择行政区划
			handlerChooseArea(areas) {
				console.log('选中的区划', areas);
				this.personForm.nativePlace = areas[0].countryCode;
				// this.personForm.nativePlace = [areas[0].proCode, areas[0].admdivCode, areas[0].countryCode,].join(",");
				if (this.$modal.isMuniCity(areas[0].proCode)) {
					this.personForm.nativePlaceName = [areas[0].admdivName, areas[0].countryName].join('');
				} else {
					this.personForm.nativePlaceName = [areas[0].proName, areas[0].admdivName, areas[0].countryName].join('');
				}
				this.areaOpen = false;
			},
			// 确认事件
			confirmBtn() {
				this.$refs.uForm.validate((valid) => {
					if (valid) {
						this.$emit('back', this.personForm);
						console.log('表单验证通过');
					}
				});
			},
			handlerBack() {
				this.$emit('back', null);
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '@/style/common/rightMenu.scss';
</style>
